<script setup lang="ts">
import { ref } from 'vue'

// 基础过渡示例
const show = ref(true)

// 列表过渡示例
const items = ref([1, 2, 3, 4, 5])
const nextNum = ref(6)

const addItem = () => {
  items.value.push(nextNum.value++)
}

const removeItem = (index: number) => {
  items.value.splice(index, 1)
}

// 状态过渡示例
const number = ref(0)
const tweenedNumber = ref(0)

const animate = () => {
  const start = tweenedNumber.value
  const end = number.value
  const duration = 500
  const startTime = performance.now()
  
  const animateNumber = (currentTime: number) => {
    const elapsed = currentTime - startTime
    const progress = Math.min(elapsed / duration, 1)
    
    tweenedNumber.value = start + (end - start) * progress
    
    if (progress < 1) {
      requestAnimationFrame(animateNumber)
    }
  }
  
  requestAnimationFrame(animateNumber)
}

const updateNumber = (e: Event) => {
  number.value = Number((e.target as HTMLInputElement).value)
  animate()
}
</script>

<template>
  <div class="transition-demo">
    <h2>过渡和动画示例</h2>

    <section>
      <h3>1. 基础过渡</h3>
      <button @click="show = !show">切换</button>
      <Transition name="fade">
        <p v-if="show" class="demo-block">
          淡入淡出效果
        </p>
      </Transition>
    </section>

    <section>
      <h3>2. 列表过渡</h3>
      <button @click="addItem">添加项目</button>
      <TransitionGroup name="list" tag="ul">
        <li v-for="(item, index) in items" 
            :key="item"
            class="list-item"
            @click="removeItem(index)"
        >
          {{ item }}
        </li>
      </TransitionGroup>
    </section>

    <section>
      <h3>3. 状态过渡</h3>
      <input type="number" 
             v-model="number" 
             step="20"
             @input="updateNumber"
      >
      <p class="number">
        当前值: {{ tweenedNumber.toFixed(0) }}
      </p>
      <div class="progress-bar">
        <div class="progress" :style="{ width: tweenedNumber + 'px' }"></div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.transition-demo {
  padding: 20px;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.demo-block {
  padding: 10px;
  background: #42b983;
  color: white;
  border-radius: 4px;
}

/* 淡入淡出过渡 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 列表过渡 */
.list-item {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background: #42b983;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 状态过渡 */
.number {
  font-size: 24px;
  font-weight: bold;
  color: #42b983;
}

.progress-bar {
  width: 300px;
  height: 20px;
  border: 1px solid #42b983;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #42b983;
  transition: width 0.5s ease;
}
</style> 